<template>
  <div class="col-xs-12 col-md-8 offset-md-2">

    <form class="card comment-form"
          v-if="!!user"
          @submit.prevent="onPublishComment">
      <div class="card-block">
        <textarea class="form-control"
                  placeholder="Write a comment..."
                  rows="3"
                  v-model="comment"></textarea>
      </div>
      <div class="card-footer">
        <img :src="user.image"
             class="comment-author-img" />
        <button class="btn btn-sm btn-primary"
                :disabled="!comment">
          Post Comment
        </button>
      </div>
    </form>

    <comment-card v-for="comment in comments"
                  :key="comment.id"
                  :comment="comment"
                  :user="user"
                  @deleteComment="deleteComment"></comment-card>

  </div>
</template>

<script>
import commentCard from './commentCard'

export default {
  name: 'CommentBoard',
  components: {
    commentCard
  },
  props: {
    user: {
      type: Object
    },
    comments: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      comment: ''
    }
  },
  methods: {
    onPublishComment() {
      this.$emit('publishComment', this.comment)
    },
    cleanComment() {
      this.comment = ''
    },
    deleteComment(comment) {
      this.$emit('deleteComment', comment)
    }
  }
}
</script>

<style>
</style>